<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>简途旅行</title>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="wap-font-scale" content="no">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/old/css/SDbargain/helpBargain.scss?__inline" media="screen" title="no_title" charset="utf-8">
</head>
<body style="visibility: hidden;">
<div class="header">
    <img src="/old/images/SDbargain/sdBargain_header@3x.png" alt=""/>
</div>
<div class="content">
    <div class="product">
        <img src="" alt=""/>
        <div class="name">九寨沟3日畅享套餐（含豪华型五星酒店天堂2晚)</div>
        <div class="info">
            <span class="price">售价:9999元</span>
            <span class="amount">还有9999个0元购名额</span>
        </div>
    </div>
    <div class="notify">
        已有XX位好友拔刀相助，帮XXX砍价，目前价格为XXX元。
        快行动起来，输入手机号，帮XXX砍一刀！
    </div>
    <div class="input-group">
        <input name="mobile" type="input" placeholder="请输入你的电话号码"/>
        <span class="getCode">获取验证码</span>
    </div>
    <div class="input-group">
        <input name="vcode" type="input" placeholder="请输入验证码"/>
        <span class="bargain">开始砍价</span>
    </div>
    <div class="error-tips">验证码错误</div>
    <div class="bargain-list">
        <table>
            <tr>
                <th>好友</th>
                <th>砍掉价格</th>
                <th>砍后价格</th>
            </tr>
            <tr>
                <td>XXXXXX</td>
                <td>999元</td>
                <td>9999元</td>
            </tr>
            <tr>
                <td>XXXXXX</td>
                <td>999元</td>
                <td>9999元</td>
            </tr>
            <tr>
                <td>XXXXXX</td>
                <td>999元</td>
                <td>9999元</td>
            </tr>
            <tr>
                <td>XXXXXX</td>
                <td>999元</td>
                <td>9999元</td>
            </tr>
            <tr>
                <td>XXXXXX</td>
                <td>999元</td>
                <td>9999元</td>
            </tr>
            <tr>
                <td>XXXXXX</td>
                <td>999元</td>
                <td>9999元</td>
            </tr>
            <tr>
                <td>XXXXXX</td>
                <td>999元</td>
                <td>9999元</td>
            </tr>
            <tr>
                <td>XXXXXX</td>
                <td>999元</td>
                <td>9999元</td>
            </tr>
            <tr>
                <td>XXXXXX</td>
                <td>999元</td>
                <td>9999元</td>
            </tr>
            <tr>
                <td>XXXXXX</td>
                <td>999元</td>
                <td>9999元</td>
            </tr>
        </table>
        <div class="pages">
            <span class="prev">上一页</span>
            <span class="next">下一页</span>
        </div>
    </div>
    <div class="esoterica">
        <div class="e-title">砍价秘籍</div>
        <div class="e-content">
            1.输入手机号码，邀请好友帮忙砍价；<br/>
            2.每人在同一时段只能发起1个砍价，但可以帮多位好友砍价；<br/>
            3.在一个砍价中，每位好友都有1次帮砍机会，金额随机减少0.8-8元；<br/>
            4.帮砍成功，好友将获得简途特价产品购买机会；<br/>
            5.该产品价格砍至0元时，砍价成功，你将获得该旅行产品“0元购”名额1个，并无法再次发起其他砍价；<br/>
            6.若砍价过程中需要更换产品进行砍价，直接进入意向产品页面，点击“我要“0元购”“，放弃已发起的砍价即可；<br/>
            7.当该产品所有“0元购”名额被抢光时，该产品砍价活动结束，届时其他参与者砍价失败，产品恢复原价。
        </div>
    </div>
    <div class="rank-list">
        <div class="title">砍价排行榜</div>
        <table>
            <tr>
                <th>排名</th>
                <th>用户</th>
                <th>砍后价格</th>
            </tr>
            <tr>
                <td>XXX</td>
                <td>13845****11</td>
                <td>999元</td>
            </tr>
            <tr>
                <td>XXX</td>
                <td>13845****11</td>
                <td>999元</td>
            </tr>
            <tr>
                <td>XXX</td>
                <td>13845****11</td>
                <td>999元</td>
            </tr>
            <tr>
                <td>XXX</td>
                <td>13845****11</td>
                <td>999元</td>
            </tr>
            <tr>
                <td>XXX</td>
                <td>13845****11</td>
                <td>999元</td>
            </tr>
            <tr>
                <td>XXX</td>
                <td>13845****11</td>
                <td>999元</td>
            </tr>
            <tr>
                <td>XXX</td>
                <td>13845****11</td>
                <td>999元</td>
            </tr>
            <tr>
                <td>XXX</td>
                <td>13845****11</td>
                <td>999元</td>
            </tr>
            <tr>
                <td>XXX</td>
                <td>13845****11</td>
                <td>999元</td>
            </tr>
            <tr>
                <td>XXX</td>
                <td>13845****11</td>
                <td>999元</td>
            </tr>
        </table>
    </div>
    <div class="footer">
        <a>年终特惠,17去玩</a>
    </div>
</div>
<script type="text/javascript" src="/old/common/js/zepto.min.js"></script>
<script>
    (function (doc, win) {
        var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    // 针对uc横竖屏rem html没有重绘的问题
                    var style;
                    if (style = document.getElementById("forhtml")) {
                        style.parentNode.removeChild(style);
                    }
                    style = document.createElement("style");
                    style.id = "forhtml";
                    document.head.appendChild(style);
                    style.appendChild(document.createTextNode("html{font-size:" + 20 * (clientWidth / 320) + "px !important;}"));
                };
        recalc();
        document.body.style.visibility = 'visible';
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
        var a = document.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            a[i].addEventListener('touchstart', function () {
            }, false);
        }
    })(document, window);
    $(document).ready(function () {
        $('.input-group .getCode').click(function (e) {
            e.preventDefault();
            var $this = $(this),$tip = $('.error-tips');
            var mobile = $this.siblings('input[name=mobile]').val();
            if (!$this.hasClass('disabled')) {
                if (!mobile) {
                    $this.removeClass('disabled');
                    $tip.text('手机号不能为空').show();
                }else if(/^[0-9]{11}$/.test($.trim(mobile))){
                    $this.addClass('disabled');
                    //发送验证码
                    $.ajax({
                        type: 'POST',
                        url: '',
                        data: {mobile: $.trim(mobile)},
                        success: function (data) {
                            if (data.code == 0) {
                                var $second = data.data - 1;//返回的倒计时 秒
                                $this.html($second + '秒后重新获取');
                                var t = setInterval(function () {
                                    if (--$second > 0) {
                                        $this.html($second + '秒后重新获取');
                                    } else {
                                        $this.html('重新发送验证码');
                                        $this.removeClass('disabled');
                                        clearInterval(t);
                                    }
                                }, 1000)
                            } else {
                                $this.removeClass('disabled');
                                $tip.text(data.msg).show();
                            }
                        },
                        error: function () {
                            $this.removeClass('disabled');
                            $.alert({
                                msg: '网络异常,请重试'
                            });
                        }
                    })
                }else{
                    $this.removeClass('disabled');
                    $tip.text('手机号格式错误').show();
                }
            }
        });
        $('.input-group .bargain').click(function (e) {
            e.preventDefault();
            var $this = $(this),$tip = $('.error-tips');
            if(!$this.hasClass('disabled')){
                var mobile = $.trim($('input[name=mobile]').val());
                var vcode = $.trim($('input[name=vcode]').val());
                if(!mobile) {
                    $tip.text('手机号不能为空').show();
                }else if(!vcode) {
                    $tip.text('验证码不能为空').show();
                }else{
                    $this.addClass('disabled');
                    //提交代码
                    $.ajax({
                        type: 'POST',
                        url: '',
                        data: {mobile:mobile, vcode: vcode},
                        success: function (data) {
                            if (data.code == 0) {
                                location.href = data.url;
                            } else {
                                $tip.text(data.msg).show();
                                $this.removeClass('disabled');
                            };
                        },
                        error: function (data) {
                            $this.removeClass('disabled');
                            $.alert({
                                msg:'网络异常,请重试'
                            });
                        }
                    })
                }
            }
        });
    });
</script>
</body>
</html>